<!DOCTYPE HTML>
<html class="">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link href='http://fonts.googleapis.com/css?family=Raleway:100,200,300,400' rel='stylesheet' type='text/css'>

    <!-- build:js modernizr.touch.js -->
    <script src="../dist/lib/modernizr.touch.js"></script>
    <!-- endbuild -->

    <link href="index.css" rel="stylesheet">
    <!-- build:css mfb.css -->
    <link href="../dist/mfb.css" rel="stylesheet">
    <!-- endbuild -->

    <title>Material floating button. The index.</title>
  </head>
  <body>

    <ul id="menu" class="mfb-component--br mfb-zoomin" data-mfb-toggle="hover">
      <li class="mfb-component__wrap">
        <a href="#" class="mfb-component__button--main">
          <i class="mfb-component__main-icon--resting ion-plus-round"></i>
          <i class="mfb-component__main-icon--active ion-close-round"></i>
        </a>
        <ul class="mfb-component__list">
          <li>
            <a href="https://github.com/nobitagit/material-floating-button/" data-mfb-label="View on Github" class="mfb-component__button--child">
              <i class="mfb-component__child-icon ion-social-github"></i>
            </a>
          </li>
          <li>
            <a href="https://github.com/nobitagit" data-mfb-label="Follow me on Github" class="mfb-component__button--child">
              <i class="mfb-component__child-icon ion-social-octocat"></i>
            </a>
          </li>

          <li>
            <a href="http://twitter.com/share?text=Check this material floating button component!&url=http://nobitagit.github.io/material-floating-button/&hashtags=material,design,button,css"
               data-mfb-label="Share on Twitter" class="mfb-component__button--child">
              <i class="mfb-component__child-icon ion-social-twitter"></i>
            </a>
          </li>
        </ul>
      </li>
    </ul>

    <section id="panel" class="panel">
      <header>
        <h1>
          Material Floating Buttons
        </h1>
        <span id="showcode" class="showcode">
          <i class="ion-eye icon-yepcode"></i>
          <i class="ion-eye-disabled icon-nocode"></i>
        </span>
      </header>
      <article>
        <p>
          Customizable, semantic Material button implementation. <br>
          <span class="striked">Shamelessly</span> Openly inspired by Google Inbox, Evernote and Path.
        </p>
        <p>
          To add Material Floating Buttons to any project just download or clone the repo from Github.<br>
          Try it yourself by selecting a style here below, or click on the yellow button here above for a code preview and refer to the docs more info.
        </p>
        <p>
          <select id="selections-fx">
            <option value=" mfb-zoomin " selected>Zoom in</option>
            <option value=" mfb-slidein ">Slide in</option>
            <option value="  mfb-slidein-spring ">Slide in (spring)</option>
            <option value=" mfb-fountain ">Fountain</option>
          </select>

          <select id="selections-pos">
            <option value="mfb-component--tl ">top left</option>
            <option value="mfb-component--tr ">top right</option>
            <option value="mfb-component--bl ">bottom left</option>
            <option value="mfb-component--br " selected>bottom right</option>
          </select>
        </p>



        <div class="code">
          <p>
            To add Material Floating Buttons to any project just download the files from here below or clone the repo from Github. <br>
          </p>
          <pre>git clone https://github.com/nobitagit/polymer-slidenav.git</pre>
          <p>
            After referencing the styles in your header drop the MFB markup in your HTML like so:
          </p>
<pre>&lt;ul class="mfb-component--br mfb-slidein" data-mfb-toggle="hover"&gt;
  &lt;li class="mfb-component__wrap"&gt;
    &lt;a href="#" data-mfb-label="A label" class="mfb-component__button--main"&gt;
      &lt;ul class="mfb-component__list"&gt;
        &lt;li&gt;
          &lt;a href="#" data-mfb-label="Add" data-mfb-label="label with long long title" class="mfb-component__button--child"&gt;
            &lt;i class="mfb-component__child-icon ion-paper-airplane"&gt;&lt;/i&gt;
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;</pre>
          <p>
            The two classes of the main <code>&lt;ul&gt;</code> tag define the position of the component and its associated animation. The rest of the code always stays the same regardless of position and animation chosen. Refer to the docs or to the showcase for a thorough explanation.
          </p>
          <p>
            The best way to integrate MFB in existing projects is to build the styles directly from the source. The scss file is filled with customizable variables. From there choose your favorite colors and sizes and then compile the css.
          </p>
          <p>
            If you use <a href="http://gruntjs.com/">Grunt</a> and have cloned the repo just run <code>grunt build</code> or <code>grunt watch</code> to have automatic compilation.
          </p>
        </div>

      </article>
      <footer>
        <a href="https://github.com/nobitagit/material-floating-button"
        >
          <button class="actions">
            <i class="ion-social-github"></i> View on Github
          </button>
        </a>
        <a href="http://twitter.com/share?text=Check this material floating button component!&url=http://nobitagit.github.io/material-floating-button/&hashtags=material,design,button,css">
          <button class="actions">
            <i class="ion-social-twitter"></i> Share on Twitter
          </button>
        </a>
      </footer>
    </section>
  <!-- build:js mfb.js -->
  <script src="../dist/mfb.js"></script>
  <!-- endbuild -->
  <script>

    var panel = document.getElementById('panel'),
        menu = document.getElementById('menu'),
        showcode = document.getElementById('showcode'),
        selectFx = document.getElementById('selections-fx'),
        selectPos = document.getElementById('selections-pos'),
        // demo defaults
        effect = 'mfb-zoomin',
        pos = 'mfb-component--br';

    showcode.addEventListener('click', _toggleCode);
    selectFx.addEventListener('change', switchEffect);
    selectPos.addEventListener('change', switchPos);

    function _toggleCode() {
      panel.classList.toggle('viewCode');
    }

    function switchEffect(e){
      effect = this.options[this.selectedIndex].value;
      renderMenu();
    }

    function switchPos(e){
      pos = this.options[this.selectedIndex].value;
      renderMenu();
    }

    function renderMenu() {
      menu.style.display = 'none';
      // ?:-)
      setTimeout(function() {
        menu.style.display = 'block';
        menu.className = pos + effect;
      },1);
    }

  </script>
  <!-- @include ga.html -->
  </body>
</html>
